<template>
  <!-- 流程审批测试详情抽屉 -->
  <div class="flow-flowDemo-detail">
    <el-drawer v-model="isShowDialog" size="80%" direction="ltr">
      <template #header>
        <h4>流程审批测试详情</h4>
      </template>
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" style="margin: 8px;">
        <el-tab-pane label="表单详情" name="0">
          <el-descriptions
              class="margin-top"
              :column="3"
              border
              style="margin: 8px;"
          >
            <el-descriptions-item :span="1">
              <template #label>
                <div class="cell-item">
                  主键
                </div>
              </template>
              {{ formData.id }}
            </el-descriptions-item>
            <el-descriptions-item :span="1">
              <template #label>
                <div class="cell-item">
                  标题
                </div>
              </template>
              {{ formData.title }}
            </el-descriptions-item>
            <el-descriptions-item :span="1">
              <template #label>
                <div class="cell-item">
                  审核状态
                </div>
              </template>
              {{ proxy.getOptionValue(formData.status, statusOptions,'value','label') }}
            </el-descriptions-item>
            <el-descriptions-item :span="1">
              <template #label>
                <div class="cell-item">
                  用户id
                </div>
              </template>
              {{ formData.createdBy }}
            </el-descriptions-item>
            <el-descriptions-item :span="1">
              <template #label>
                <div class="cell-item">
                  年龄
                </div>
              </template>
              {{ formData.age }}
            </el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>
        <el-tab-pane label="审批记录" name="1">
            <FlowLog ref="flowLogRef" :form-id="formId" :form-table="formTable" :key="formId"/>
        </el-tab-pane>
        <el-tab-pane label="流程图" name="2">
          <ShowFlowDesign ref="showFlowCheckRef" />
        </el-tab-pane>
      </el-tabs>
    </el-drawer>
  </div>
</template>
<script setup lang="ts">
  import { reactive, toRefs, ref,getCurrentInstance } from 'vue';
  import {
    getFlowDemo,
  } from "/@/api/flow/flowDemo";
  import {
    FlowDemoInfoData,
    FlowDemoEditState
  } from "/@/views/flow/flowDemo/list/component/model"
  import {TabsPaneContext} from "element-plus";
  import FlowLog from "/@/components/gFlow/flowLog.vue";
  import ShowFlowDesign from "/@/components/gFlow/showDesign.vue";
  import {getRunStep} from "/@/api/flow/flowModel";
  defineOptions({ name: "ApiV1FlowFlowDemoDetail"})
  const props = defineProps({
    statusOptions:{
      type:Array,
      default:()=>[]
    },
  })
  const flowLogRef = ref()
  const showFlowCheckRef = ref()
  const formId = ref(0)
  const formTable = ref('')
  const activeName = ref('0')
  const handleClick = (tab: TabsPaneContext) => {
    if(tab.index=="1"){
      flowLogRef.value.getLogList()
    }else if(tab.index=="2"){
      getRunStep({formTable:formTable.value,formId:formId.value}).then((res:any)=>{
        showFlowCheckRef.value.showDesign({flowId:res.data.data?.runFlow||'0',processId:res.data.data?.runFlowNode||''})
      })
    }
  }
  const {proxy} = <any>getCurrentInstance()
  const state = reactive<FlowDemoEditState>({
    loading:false,
    isShowDialog: false,
    formData: {
      id: undefined,
      title: undefined,
      status: false ,
      updatedAt: undefined,
      createdBy: undefined,
      age: undefined,
    },
    // 表单校验
    rules: {
      id : [
          { required: true, message: "主键不能为空", trigger: "blur" }
      ],
      status : [
          { required: true, message: "审核状态不能为空", trigger: "blur" }
      ],
    }
  });
  const { isShowDialog,formData } = toRefs(state);
  // 打开弹窗
  const openDialog = (row?: FlowDemoInfoData) => {
    resetForm();
    if(row) {
      formId.value = row.actionBtn.wfFid
      formTable.value = row.actionBtn.wfType
      getFlowDemo(row.id!).then((res:any)=>{
        const data = res.data;
        data.createdBy = data.createdUser?.userNickname
        state.formData = data;
      })
    }
    state.isShowDialog = true;
  };
  // 关闭弹窗
  const closeDialog = () => {
    state.isShowDialog = false;
  };
  defineExpose({
    openDialog,
  });
  // 取消
  const onCancel = () => {
    closeDialog();
  };
  const resetForm = ()=>{
    state.formData = {
      id: undefined,
      title: undefined,
      status: false ,
      updatedAt: undefined,
      createdBy: undefined,
      age: undefined,
    }
    activeName.value = '0'
  };
</script>
<style scoped>
  .flow-flowDemo-detail :deep(.el-form-item--large .el-form-item__label){
    font-weight: bolder;
  }
  .pic-block{
    margin-right: 8px;
  }
  .file-block{
    width: 100%;
    border: 1px solid var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
    margin-bottom: 5px;
    padding: 3px 6px;
  }
  .ml-2{margin-right: 5px;}
</style>
